<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.3/theme-chalk/index.css" rel="stylesheet">
    <script src="${path}/resources/dist/js/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.3/index.js"></script>
    <script src="${path}/resources/dist/js/jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="${path}/resources/dist/css/login3.css"/>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.1/qs.js"></script>
    <link rel="stylesheet" href="${path}/resources/dist/css/main.css">

    <style>
        main.el-main{
            width: auto;
            height: auto;
        }


    </style>
</head>
<body>
<div id="app">
    <template>
    <el-container class="index-con">
        <el-aside :class="showclass">
            <el-menu default-active="2" :collapse="collapsed" collapse-transition router unique-opened
                     class="el-menu-vertical-demo"
                     background-color="#334157" text-color="#fff" active-text-color="#ffd04b">
                <div class="logobox">
                    <img class="logoimg" src="${path}/resources/dist/img/logo.png" alt="">
                </div>
                <el-submenu v-for="menu in menuList" :key="menu.mid" :index="menu.menu_name">
                    <template slot="title">
                        <i :class="menu.menu_icon"></i>
                        <span>{{menu.menu_name}}</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item v-for="chmenu in menu.sonList" :index="'/'+chmenu.menu_url" :key="chmenu.mid"
                                      @click="addTab(chmenu)">
                            <i class="el-icon-location"></i>
                            <span>{{chmenu.menu_name}}</span>
                        </el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </el-menu>
        </el-aside>
        <el-container class="main-con">
            <el-header class="index-header">
                <el-menu class="el-menu-demo" mode="horizontal" background-color="#334157" text-color="#fff"
                         active-text-color="#fff">
                    <el-button style="background-color:transparent; border: none;">
                        <img class="showimg" :src="isCollapse?imgsq:imgshow" @click="toggle(collapsed)"/>
                    </el-button>
                    <el-submenu index="2" class="submenu" style="float: right;">
                        <!-- <template slot="title">{{user.userRealName}}</template> -->
                        <template slot="title">{{user}}</template>
                        <el-menu-item index="2-1">设置</el-menu-item>
                        <el-menu-item @click="content()" index="2-2">个人中心</el-menu-item>
                        <el-menu-item @click="exit()" index="2-3">退出</el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-header>
            <el-main clss="index-main">
                <!--  iframe：在当前页面中加载其他的页面  -->
                <iframe name="child" id="child" :src="path" width="100%" height="1000px" frameborder="0" scrolling="no"
                        style="position:related;top: 2.8px;left: 0px;"></iframe>
            </el-main>
        </el-container>
    </el-container>
    </template>
</div>
<script type="text/javascript">
    const vm = new Vue({
        el: "#app",
        data: {
            collapsed: false,
            imgshow: '${path}/resources/dist/img/show.png',
            imgsq: '${path}/resources/dist/img/sq.png',
            user: {},
            menuList: [],
            isCollapse: false,
            showclass: 'asideshow',
            path: "index.html" // 设置 iframe 的路径
        },
        // 创建完毕状态(里面是操作)
        created() {
            this.user = '${sessionScope.login.username}';
        },
        methods: {
            //个人中心
            content(){
                location.href="${path}/page/Personalcenter.jsp"
            },
            // 退出登录
            exit() {
                location.href = "${path}/login.do?method=deleteLogin";
            },
            // 切换显示
            toggle(showtype) {
                this.collapsed = !showtype
                this.isCollapse = !this.isCollapse;
                this.showclass = showtype ? "asideshow" : "aside";
            },
            addTab(menu) {
                this.path = menu.menu_url
            }
        }, mounted() {
            // 给菜单列表进行初始化
            this.menuList = ${sessionScope.menus};

        }
    });
</script>
</body>
</html>
